const s = {
  v: `
        attribute vec4 a_position;
        attribute float a_pointSize;
        void main() {
            gl_Position = a_position;
            gl_PointSize = a_pointSize;
        }
    `,
  f: `
    precision mediump float;
    uniform vec2 u_color;
    void main() {
        gl_FragColor = vec4(u_color.r, u_color.g, 0.0, 1.0);
    }
    `,
}
// 得到着色器程序
const program = getProgram(gl, s)
// 获取着色器程序中的变量
const a_position = gl.getAttribLocation(program, "a_position")
const a_pointSize = gl.getAttribLocation(program, "a_pointSize")
const u_color = gl.getUniformLocation(program, "u_color")
// 设置变量的值
// gl.vertexAttrib4f(a_position, 0.5, 0.5, 0.0, 1.0)
// 绘制程序
// gl.drawArrays(gl.POINTS, 0, 1)
const arr = []
// onclick
canvasRef.onclick = (ev) => {
  // 这是点大小
  gl.vertexAttrib1f(a_pointSize, generateRandomNumber())
  const { clientX: x, clientY: y } = ev
  const { width, height } = canvasRef
  // 获取鼠标位置
  const { left, top } = ev.target.getBoundingClientRect()
  const targetX = x - left
  const targetY = y - top
  const halfWidth = width / 2
  const halfHeight = height / 2

  // 获取鼠标位置
  const x1 = (targetX - halfWidth) / halfWidth
  const y1 = (halfHeight - targetY) / halfHeight
  arr.push({ x1, y1 })
  arr.forEach((item) => {
    // 设置变量的值
    gl.vertexAttrib4f(a_position, item.x1, item.y1, 0.0, 1.0)
    gl.uniform2f(u_color, item.x1, item.y1)

    gl.drawArrays(gl.POINTS, 0, 1)
  })
}
